<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example - mouseenter</title>
<script src="../../build/kissy-min.js"></script>
</head>
<body>

<div style="padding: 30px; background-color: #e3e4e5">
    <div id="outer" style="padding: 20px; background-color: #D6EDFC">
        <p class="info">move your mouse</p>
        <div id="inner" style="padding: 20px; background-color: #FFCC00">
            <p class="info">move your mouse</p>
            <p class="num">0</p>
        </div>
        <p class="num">0</p>
    </div>
</div>

<script>
(function() {
    var S = KISSY, DOM = S.DOM, Event = S.Event,
            n1 = 0,
            outer = S.get('#outer'),
            inner = S.get('#inner'),
            info1 = S.get('#outer .info'),
            num1 = S.query('#outer .num')[1];

    Event.add(outer, 'mouseenter', function(ev) {
        DOM.text(info1, ev.type);
        DOM.text(num1, ++n1);
    });

    Event.add(outer, 'mouseleave', function(ev) {
        DOM.text(info1, ev.type);
        DOM.text(num1, ++n1);
    });

    var n2 = 0,
        info2 = S.get('#inner .info'),
        num2 = S.get('#inner .num');

    Event.add(inner, 'mouseenter', function(ev) {
        DOM.text(info2, ev.type);
        DOM.text(num2, ++n2);
    });

    Event.add(inner, 'mouseleave', function(ev) {
        DOM.text(info2, ev.type);
        DOM.text(num2, ++n2);
    });
})();
</script>
</body>
</html>
